<!DOCTYPE html>
<html style="">
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
		<!-- <script type="text/javascript" src="https://cdn.bootcss.com/require.js/2.3.3/require.js"></script> -->
	</head>
	<body>
		<div style="height:100%;display:flex;flex-direction: column;" id="app">
			<div style="display: flex;justify-content: center;align-items: center;flex:1">
				<div style=";width:90%;height: 80%;border:5px solid black;display: flex;justify-content: center;align-items: center;">
					<span>请将微信窗口固定在边框内部</span>
				</div>
			</div>
			<div style="display:flex;justify-content: center;">
				<button @click="closeWin" style="display:flex;justify-content: center;">完成</button>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		 new Vue({
			el:'#app',
			data:{
				message:"123465"
			},
			computed:{
				msg(){
					console.log("msg==");
					return '789456';
				}
			},
			methods:{
				closeWin(){
					const { ipcRenderer } = window.require('electron');
					ipcRenderer.send('window-close')
				}
			},
			beforeMount(){
				console.log("挂载前生命周期");
			},
			mounted(){
				console.log("挂载完成生命周期");
			},
			watch:{
				'message'(){
					console.log("监视器调用");
				}
			}
		})
	</script>
	<style>
		html,body{
		    height:100%;
		}
		*{
			margin:0px;
			padding:0px;
		}
		button:active { 
			background-position: bottom right; 
			color: #000; 
			outline: none; /* hide dotted outline in Firefox */ 
		}
		button { 
			text-align:center;
			background: no-repeat scroll top right; 
			color: #444; 
			/* display: block; */
			float: left; 
			font: normal 12px arial, sans-serif; 
			/* height: 24px; */
			display:flex;
			align-items:center;
			/* margin-right: 6px; */
			padding:5px 15px;
			margin:50px 0;
			margin-top:0;
			/* padding-right: 18px; /* sliding doors padding */ */
			text-decoration: none; 
		} 
	</style>
</html>